<template>
    <div class="forms">
        <table>
            <tr class="header">
                <th v-for="(item, index) in ['', '时间', '内容', '地址', '状态']" :key="index">
                    {{ item }}
                </th>
            </tr>
            <div ref="con" class="con" id="divContainer">
                <div class="scroll" :style="{ top, transition: animateFlag ? 'top 0.5s linear' : 'auto' }">
                    <tr class="box" v-for="(item, $index2) in showdata" :key:any="$index2">
                        <td>
                            <img v-show="item.type == '智联'" src="../assets/forms_1_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '被动'" src="../assets/forms_2_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '主动'" src="../assets/forms_3_icon.png" style="width:13px;height:18px" />
                        </td>
                        <td :title="item.time">{{ item.time.substring(11) }}</td>
                        <td :title="item.text">{{ item.text }}</td>
                        <td :title="item.address">{{ item.address }}</td>
                        <td :title="item.state" v-if="['发现','待处置'].includes(item.state)" class="active1" style="color: red">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else-if="['立案','派遣','处置','核查','处置中'].includes(item.state)" class="active2" style="color: gold">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else-if="['结案','已处置'].includes(item.state)" class="active3" style="color: #00ff36">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else class="active3" style="color: white">
                            {{ item.state }}
                        </td>
                    </tr>
                    <tr class="box" v-for="(item, $index2) in showdata" :key:any="$index2">
                        <td>
                            <img v-show="item.type == '智联'" src="../assets/forms_1_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '被动'" src="../assets/forms_2_icon.png" style="width:18px;height:18px" />
                            <img v-show="item.type == '主动'" src="../assets/forms_3_icon.png" style="width:13px;height:18px" />
                        </td>
                        <td :title="item.time">{{ item.time.substring(11) }}</td>
                        <td :title="item.text">{{ item.text }}</td>
                        <td :title="item.address">{{ item.address }}</td>
                        <td :title="item.state" v-if="['待处置'].includes(item.state)" class="active1" style="color: red">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else-if="['处置中'].includes(item.state)" class="active2" style="color: gold">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else-if="['已处置'].includes(item.state)" class="active3" style="color: #00ff36">
                            {{ item.state }}
                        </td>
                        <td :title="item.state" v-else class="active3" style="color: white">
                            {{ item.state }}
                        </td>
                    </tr>
                </div>
            </div>
        </table>
    </div>
</template>

<script lang="ts">
import { ref, reactive, watch } from 'vue'
import { log } from 'util'
export default {
    name: 'forms',
    props: {
        fromsData: Array,
    },
    data() {
        return {
            activeIndex: 0,
            animateFlag: false,
        }
    },
    setup(props) {
        let animate = false
        let fromsData = ref([])
        let showdata: any = ref([])
        let page = ref(1)

        if (fromsData.value.length > 0) {
            showdata.value = fromsData.slice(page.value - 1, 100)
        }

        // watch(
        //   () => fromsData,
        //   (age, preAge) => {
        //     console.log(age); // 100
        //     console.log(preAge); // 10
        //   })

        watch(props, (currentValue) => {
            page.value = 1
            // console.log(currentValue, 'fromsData')
            fromsData.value = currentValue.fromsData

            if (fromsData.value.length > 0) {
                showdata.value = fromsData.value.slice(page.value - 1, 100)
            }
        })

        return { fromsData: reactive(fromsData), showdata: reactive(showdata) }
    },
    // scroll(){
    //   console.log(111)
    //     if (fromsData !== undefined && this.fromsData.length > 4) {
    //       const con1: any = this.$refs.con1;
    //       con1.style.marginTop = "-1.083rem";
    //       this.animate = !this.animate;
    //       const that: any = this;
    //       setTimeout(function () {
    //         that.list.push(that.fromsData[0]);
    //         that.list.shift();
    //         con1.style.marginTop = "0rem";
    //         that.animate = !that.animate;
    //       }, 500);
    //     }
    // },
    computed: {
        top() {
            return -this.activeIndex * 36 + 'px'
        },
    },
    methods: {
        scrollTable() {
            if (this.activeIndex < this.showdata.length) {
                this.activeIndex += 1
                this.animateFlag = true
            } else {
                this.activeIndex = 0
                this.animateFlag = false
            }
        },
    },
    mounted() {
        var test = setInterval((_) => {
            this.scrollTable()
        }, 1500)
        var that = this

        document
            .getElementById('divContainer')
            .addEventListener('mouseenter', function (event) {
                clearInterval(test)
            })
        document
            .getElementById('divContainer')
            .addEventListener('mouseleave', function (event) {
                test = setInterval((_) => {
                    that.scrollTable()
                }, 1500)
            })
    },
}
</script>

<style scoped lang="scss">
.con {
    height: 275px;
    overflow: hidden;
}
.scroll {
    position: relative;
    transition: top 0.5s linear;
}
.scrollwu {
    position: relative;
}
.forms {
    width: 100%;
    height: 100%;
    // background: #000000;
    background: transparent;
    table {
        width: 475px;
        height: 100%;
        color: #ffffff;
        height: 15px;
        opacity: 1;
        font-size: 16px;
        padding-left: 20px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 400;
        text-align: left;
        tr {
            th {
                line-height: 40px;
                text-align: center;
            }
            th:first-child {
                max-width: 30px;
            }
            th:nth-child(2) {
                min-width: 70px;
                text-align: left;
            }
            th:nth-child(3) {
                min-width: 148px;
                text-align: left;
            }
            th:nth-child(4) {
                min-width: 88px;
                text-align: left;
            }
        }
        .header {
            width: 403px;
            display: flex;
            th {
                flex: 1;
            }
        }
        .box {
            width: 403px;
            display: flex;
            height: 36px;
            line-height: 36px;
            &:nth-child(2n + 1) td:not(:first-child) {
                background: #02202d;
            }
            td {
                flex: 1;
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                &:first-child {
                    max-width: 30px;
                    text-align: center;
                    img {
                        width: 18px;
                        height: 18px;
                        // margin: auto;
                        margin-top: 9px;
                    }
                }
                &:nth-child(2) {
                    flex: 0 0 70px;
                }
                &:nth-child(3) {
                    flex: 0 0 1;
                }
                &:nth-child(4) {
                    flex: 0 0 90px;
                }
            }
            td[class^='active'] {
                // min-width: 75px;
                flex: 0 0 55px;
                text-align: center;
            }
        }
    }
}
.active1 {
    text-align: center;
    color: #fa834a;
}
.active2 {
    text-align: center;
    color: #10f7ff;
}
.active3 {
    text-align: center;
    color: #62abfc;
}
.active4 {
    text-align: center;
    color: #ff4273;
}
.active5 {
    text-align: center;
    color: #3e75ff;
}
.active6 {
    // color: #fcd331;
    text-align: center;
    color: #62abfc;
}
.active7 {
    text-align: center;
    color: #00ff9c;
}
.active8 {
    text-align: center;
    color: #fcff10;
}
.active9 {
    text-align: center;
    color: #ff7465;
}
.active10 {
    text-align: center;
    color: #64dcff;
}
#divContainer {
    width: 403px;
}
</style>
